<template>
  <!-- <div>京东佣金记录</div> -->
  <div class="shop">
    <el-form :inline="true"
      :model="form"
      class="demo-form-inline">
      <el-form-item label="订单号:">
        <el-input v-model="form.orderId"
          size='small'
          placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-input v-model="form.title"
          size='small'></el-input>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input v-model="form.username"
          size='small'></el-input>
      </el-form-item>
      <el-form-item label="所属代理:">
        <el-input v-model="form.agentName"
          size='small'></el-input>
      </el-form-item>
      <el-form-item label="订单创建时间:">
        <el-date-picker v-model="form.startTime"
          type="date"
          style="width:142px"
          size='small'
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker>
        ~
        <el-date-picker v-model="form.endTime"
          type="date"
          style="width:142px"
          value-format="yyyy-MM-dd"
          size='small'
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="联盟状态:">
        <el-select v-model="form.status"
          placeholder="活动区域"
          size='small'
          style='width:140px;'>
          <el-option label="全部"
            value=""></el-option>
          <el-option label="订单付款"
            value="0"></el-option>
          <el-option label="订单结算"
            value="1"></el-option>
          <el-option label="订单失效"
            value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算状态:">
        <el-select v-model="form.settleStatus"
          placeholder="活动区域"
          size='small'
          style='width:140px;'>
          <el-option label="全部"
            value=""></el-option>
          <el-option label="未结算"
            value="0"></el-option>
          <el-option label="已结算"
            value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search">
          <el-button type="primary"
            size='small'
            @click="searchIncomes">搜索</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
          type="primary"
          @click='exportIncomeData'>导出数据</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
          type="primary"
          @click='exportIncomeData'>导入联盟订单</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
          type="primary"
          @click='isShowHightSearch = true'>高级搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table ref='multipleTable'
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"
        label='选择'
        width="55">
      </el-table-column>
      <el-table-column label='ID'
        prop='ID'></el-table-column>
      <el-table-column label='订单号'
        prop='order_num'
        width='140'></el-table-column>
      <el-table-column label='联盟状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.status == 1'>订单付款</p>
          <p v-if='scope.row.status == 2'>订单结算</p>
          <p v-if='scope.row.status == 3'>订单失效</p>
        </template>
      </el-table-column>
      <el-table-column label='所属分类'
        prop='category'></el-table-column>
      <el-table-column label='商品ID'
        prop='shop_id'
        width='120'></el-table-column>
      <el-table-column label='所属推广位'
        prop='location'
        width='120'></el-table-column>
      <el-table-column label='所属代理'
        prop='phone'
        width='120'></el-table-column>
      <el-table-column label='佣金比例'>
        <template slot-scope="scope">
          <p v-if='scope.row.rate'>{{scope.row.rate}}%</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label='成交金额'>
        <template slot-scope="scope">
          <p v-if='scope.row.price'>¥{{scope.row.price}}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label='收益预估'>
        <template slot-scope="scope">
          <p v-if='scope.row.profit'>¥{{scope.row.profit}}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label='结算状态'
        prop='status_word'>
      </el-table-column>
      <el-table-column label='创建时间'
        prop='created_at'
        width='120'></el-table-column>
      <el-table-column label='完成时间'
        prop='accomy_time'
        width='120'></el-table-column>
      <el-table-column label='操作'
        fixed='right'
        width='240'>
        <template slot-scope="scope">
          <el-button type='primary'
            size='mini'
            @click="watchIncomeDetail(scope.row.ID)">详情</el-button>
          <el-button type='primary'
            size='mini'
            @click="deleteIncome(scope.row.ID)">删除</el-button>
          <el-button size='mini'
            @click="calucateIncome(scope.row.ID)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <div>
      <!--  :disabled="selectionList.length === 0"-->
      <el-button type='primary'
        size='mini'
        @click="calculatePerPage">结算本页</el-button>
      <el-button type='primary'
        size='mini'
        @click="calculateAllNocal">结算所有未结算</el-button>
      <el-button type='primary'
        size='mini'
        @click="calculateMonth">结算上个自然月</el-button>
      <el-button type='primary'
        size='mini'
        @click="calculateAlready">结算联盟已完成（确认收货7天后）</el-button>
      <el-button size='mini'
        @click="deleteOrder">删除</el-button>
    </div>

    <!--高级搜索-->
    <jdialog title="高级搜索"
      :visible.sync="isShowHightSearch"
      width="600px">
      <el-form :model='searchForm'
        class="demo-ruleForm"
        label-width="140px">
        <el-form-item label='订单时间'>
          <el-select v-model="searchForm.timeType"
            placeholder="请选择类型"
            style="width:150px;"
            size='mini'>
            <el-option label="创建时间"
              value="1"></el-option>
            <el-option label="结算时间"
              value="2"></el-option>
          </el-select>
          <el-date-picker v-model="searchForm.ordertime"
            class="picker"
            type="date"
            style="width:142px"
            size='mini'
            value-format="yyyy-MM-dd"
            placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label='订单类型'>
          <el-select v-model="searchForm.ordertype"
            placeholder="请选择类型"
            style="width:150px;"
            size='mini'>
            <el-option label="2方订单"
              value="1"></el-option>
            <el-option label="3方订单"
              value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='订单场景'>
          <el-select v-model="searchForm.orderScene"
            placeholder="请选择类型"
            style="width:150px;"
            size='mini'>
            <el-option label="常规订单"
              value="1"></el-option>
            <el-option label="渠道订单"
              value="2"></el-option>
            <el-option label="会员订单"
              value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='同步数量'>
          <el-input-number size='mini' v-model="searchForm.syncNumber"  :min="1"  label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size='mini' @click="isShowHightSearch = false">取消</el-button>
        <el-button size='mini' type='primary' @click="certainHighSearch">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>

export default {
  data () {
    return {
      form: {
        page: 1,
        size: 20,
        status: '',
        start_time: '',
        end_time: '',
        ordertype: 0,
        orderstatus: 0,
        orderId: '',
        title: '',
        username: '',
        agentName: '',
        startTime: '',
        endTime: '',
        settleStatus: '',
        isExport: '',
      },
      selectionList: [],
      tableData: [{ ID: '198197', order_num: '600123456789', status: 1, category: '家居百货', shop_id: '001002003', location: '108856241', phone: '15888888888', rate: '20', price: '21.99', profit: '4.39', status_word: '未结算', created_at: '2019-5-20/16:00', accomy_time: '2019-5-20/16:00' }, { ID: '198197', order_num: '600123456789', status: 2, category: '家居百货', shop_id: '001002003', location: '108856241', phone: '15888888888', rate: '20', price: '21.99', profit: '4.39', status_word: '已结算', created_at: '2019-5-20/16:00', accomy_time: '2019-5-20/16:00' }, { ID: '198197', order_num: '600123456789', status: 3, category: '家居百货', shop_id: '001002003', location: '108856241', phone: '15888888888', rate: '20', price: '21.99', profit: '4.39', status_word: '未结算', created_at: '2019-5-20/16:00', accomy_time: '2019-5-20/16:00' }],

      total: 0,

      //高级搜索
      isShowHightSearch: false,
      searchForm: {
        timeType: '',
        ordertime: '',
        ordertype: '',
        orderScene: '',
        syncNumber: 0
      }
    }
  },
  mounted () {

  },
  methods: {
    //搜索佣金记录数据
    searchIncomes () {

    },
    //导出数据
    exportIncomeData () {

    },
    handleSelectionChange (arr) {
      this.selectionList = arr
    },
    //查看详情
    watchIncomeDetail (ID) {
      console.log(ID)
    },
    //删除记录
    deleteIncome (ID) {
      console.log(ID)
    },
    //结算
    calucateIncome (ID) {
      console.log(ID)
    },
    //结算本页
    calculatePerPage () {

    },
    //结算所有未结算
    calculateAllNocal(){

    },
    //结算上个自然月
    calculateMonth () {

    },
    //结算联盟已完成
    calculateAlready(){

    },
    //删除
    deleteOrder () {
      this.$confirm('当前删除所选订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {

      }).catch(() => {
        console.log('cancel')
      });
    },
    //确定高级搜索
    certainHighSearch(){
      this.isShowHightSearch  = false
    },
    pageChange (page) {
      this.form.page = page
      //获取更多数据

    },

    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .pagination {
    float: right;
    margin-top: 12px;
  }
  .demo-ruleForm{
    padding: 20px;
  }
  .picker{
    margin-left: 12px;
  }
  .align{
    text-align:  center;
    margin-bottom: 12px;
  }
}
</style>